<template>
	<view class="eval">
		<p>{{ $t('text.comment') }}</p>
		<ul>
			<li v-for="(item,index) in eval" :key="index">
				<view class="eval_top">
					<dl>
						<dt>
							<image :src="item.head" mode=""></image>
						</dt>
						<dd>
							<view class="eval_title">
								<p>{{item.name}}</p>
								<text>{{$t('check.in')}} {{item.checkin_time}}</text>
							</view>
							<view class="eval_rate">
								<text>rate</text>
								<u-rate :count="5" v-model="item.score" gutter="1">></u-rate>
							</view>
							
						</dd>
					</dl>
				</view>
				<p>{{item.content}}</p>
				<view class="eval_img" v-if="item.imgurl">
					<image v-for="(items,i) in item.imgurl.split(',')" :key="i" :src="items" mode="aspectFill"></image>
				</view>
				<view class="eval_reply">
					{{item.reply}}
				</view>
			</li>
		</ul>
		<view class="empty" v-if="eval.length<=0">
			<image src="/static/list.png" mode=""></image>
			<p>No reviews available at the moment~</p>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		props:{
			eval:{
				type:Array,
				default:()=>[]
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
		.empty{
			text-align: center;
			padding-bottom: 120rpx;
			image{
				width: 376rpx;
				height: 376rpx;
			}
			p{
				font-size: 28rpx;
				color: #999999;
			}
		}
	.eval{
		>p{
			font-family: Microsoft YaHei UI;
			font-weight: 400;
			font-size: 42rpx;
			color: #333333;
			padding: 40rpx 0;
		}
		ul{
			background: #ffffff;
			border-radius: 20rpx;
			padding: 28rpx;
			li{
				margin-bottom: 24rpx;
				.eval_top{
					dl{
						display: flex;
						align-items: center;
						dt{
							image{
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								background: #eeeeee;
							}
						}
						dd{
							padding-left: 16rpx;
							width: 85%;
							.eval_title{
								display: flex;
								align-items: center;
								justify-content: space-between;
								p{
									font-family: Microsoft YaHei UI;
									font-size: 28rpx;
									color: #333333;
									line-height: 13rpx;
								}
								text{
									font-family: Microsoft YaHei UI;
									font-size: 20rpx;
									color: #BBBBBB;
									line-height: 13rpx;
								}
							}
							.eval_rate{
								margin-top: 14rpx;
								display: flex;
								align-items: center;
								text{
									font-family: Microsoft YaHei UI;
									font-weight: 400;
									font-size: 24rpx;
									color: #333333;
									line-height: 28rpx;
								}
							}
						}
					}
				}
				>p{
					padding: 16rpx 0;
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 30rpx;
				}
				.eval_img{
					display: flex;
					image{
						width: 185rpx;
						height: 185rpx;
						background: #eeeeee;
						margin-right: 10rpx;
					}
				}
				.eval_reply{
					margin-top: 20rpx;
					padding: 10rpx;
					font-size: 20rpx;
					color: #999999;
					line-height: 28rpx;
					background: #F7F7F7;
				}
			}
		}
	}
</style>